dropzone

What is dropzone?

Dropzone is a JavaScript library that provides drag-and-drop file uploads with image previews. It is highly customizable and easy to integrate into web applications.

What are dropzone's main functionalities?

Basic File Upload

This code demonstrates how to create a basic Dropzone instance for file uploads. It specifies the URL to which files will be uploaded, the parameter name for the file, the maximum file size, and the accepted file types.

const Dropzone = require('dropzone');

// Create a Dropzone instance
const myDropzone = new Dropzone('#my-dropzone', {
  url: '/file/post',
  paramName: 'file',
  maxFilesize: 2, // MB
  acceptedFiles: '.jpeg,.jpg,.png,.gif'
});

Custom Preview Template

This code demonstrates how to create a Dropzone instance with a custom preview template. The template defines the HTML structure for the file preview, including elements for the thumbnail, file name, file size, progress bar, and error/success messages.

const Dropzone = require('dropzone');

// Custom preview template
const previewTemplate = `
  <div class="dz-preview dz-file-preview">
    <div class="dz-image"><img data-dz-thumbnail /></div>
    <div class="dz-details">
      <div class="dz-size"><span data-dz-size></span></div>
      <div class="dz-filename"><span data-dz-name></span></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <div class="dz-success-mark"><span>✔</span></div>
    <div class="dz-error-mark"><span>✘</span></div>
  </div>
`;

// Create a Dropzone instance with custom preview template
const myDropzone = new Dropzone('#my-dropzone', {
  url: '/file/post',
  previewTemplate: previewTemplate
});

Event Handling

This code demonstrates how to handle various events in Dropzone. It shows how to log messages when a file is added, track the upload progress, and handle successful uploads.

const Dropzone = require('dropzone');

// Create a Dropzone instance
const myDropzone = new Dropzone('#my-dropzone', {
  url: '/file/post'
});

// Event handling
myDropzone.on('addedfile', function(file) {
  console.log('File added:', file.name);
});

myDropzone.on('uploadprogress', function(file, progress) {
  console.log('Upload progress:', progress);
});

myDropzone.on('success', function(file, response) {
  console.log('File uploaded successfully:', response);
});

Other packages similar to dropzone

react-dropzone

React Dropzone is a simple React component for creating a file dropzone. It provides a flexible and customizable way to handle file uploads in React applications. Compared to Dropzone, it is specifically designed for React and offers a more seamless integration with React's component-based architecture.

fine-uploader

Fine Uploader is a JavaScript library for file uploads that supports multiple file selection, drag-and-drop, and image previews. It offers a wide range of customization options and supports various back-end technologies. Compared to Dropzone, Fine Uploader provides more advanced features and greater flexibility but may require more configuration.

uppy

Uppy is a modular file uploader for web applications. It supports drag-and-drop, file previews, and resumable uploads. Uppy is highly customizable and can be extended with various plugins. Compared to Dropzone, Uppy offers a more modern and modular approach to file uploads, making it suitable for complex use cases.

README

Dropzone is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone will display file previews and upload progress, and handle the upload for you via XHR.

It's fully configurable and can be styled according to your needs.

Quickstart

• 📚 Full documentation
• 💾 Download link containing JavaScript UMD modules and CSS files (full and minimised)
• ⚙️ src/options.js for all available options

 

 

Community

If you need support please use the discussions section or stackoverflow with the dropzone.js tag and not the GitHub issues tracker. Only post an issue here if you think you discovered a bug.

If you have a feature request or want to discuss something, please use the discussions as well.

⚠️ Please read the contributing guidelines before you start working on Dropzone!

Main features

• Beautiful by default
• Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
• Retina enabled
• Multiple files and synchronous uploads
• Progress updates
• Support for large files
• Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.
• Browser image resizing (resize the images before you upload them to your server)
• Well tested

MIT License

See LICENSE file

Changelog

5.9.3

• Fix incorrect resize method used for creating thumbnails of existing files (thanks to @gplwhite)